<template>
	<el-card>
		<template #header>
			<el-space>
				<el-button type="primary" size="small" @click="openModal('add', 0)">新增菜单</el-button>
			</el-space>
		</template>
		<el-table :data="data" row-key="id" border>
			<el-table-column prop="id" label="菜单ID" />
			<el-table-column prop="title" label="菜单名称" />
			<el-table-column prop="icon" label="菜单图标" />
			<el-table-column prop="name" label="路由名称" />
			<el-table-column prop="path" label="路由路径" />
			<el-table-column label="菜单状态" />
			<el-table-column label="操作" fixed="right" min-width="180">
				<template #default="scope">
					<el-button link type="primary" size="small" @click="openModal('children', scope.row.id)">
						新增子菜单
					</el-button>
					<el-button link type="primary" size="small" @click="openModal('edit', scope.row.id)">编辑</el-button>
					<el-popconfirm title="确认删除吗?" confirm-button-text="确认" cancel-button-text="取消"
						@confirm="handleDelete(scope.row.id)">
						<template #reference>
							<el-button type="danger" size="small">删除</el-button>
						</template>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
	</el-card>
	<!-- modal -->
	<MenuFormModal v-model="modalVisible" :type="modalType" :id="currentId" />
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { fetchPermissionByRole } from '@/apis/admin/permission';
import MenuFormModal from '@/components/admin/systems/menu/MenuFormModal.vue';

type Permission = {
	id: number;
	parentId: number;
	name: string;
	title: string;
	path: string;
	icon?: string;
	children?: Permission[];
};

const columns = [
	{
		title: '菜单ID',
		dataIndex: 'id',
		key: 'id',
		align: 'center',
	},
	{
		title: '菜单名称',
		dataIndex: 'name',
		key: 'name',
		align: 'center',
	},
	{
		title: '菜单图标',
		dataIndex: 'icon',
		key: 'icon',
		align: 'center',
	},
	{
		title: '路由名称',
		dataIndex: 'routerName',
		key: 'routerName',
		align: 'center',
	},
	{
		title: '路由路径',
		dataIndex: 'path',
		key: 'path',
		align: 'center',
	},
	{
		title: '菜单状态',
		dataIndex: 'status',
		key: 'status',
		align: 'center',
	},
	{
		title: '操作',
		key: 'action',
		align: 'center',
	},
];

const data = ref<Permission[]>([]);
const getMenus = () => {
	fetchPermissionByRole<Permission[]>().then((res) => {
		data.value = res.data;
	});
};
onMounted(() => {
	getMenus();
});

const rowSelection = ref({
	checkStrictly: false,
	onChange: (selectedRowKeys: (string | number)[], selectedRows: DataItem[]) => {
		console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
	},
	onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => {
		console.log(record, selected, selectedRows);
	},
	onSelectAll: (selected: boolean, selectedRows: DataItem[], changeRows: DataItem[]) => {
		console.log(selected, selectedRows, changeRows);
	},
});

// 表格项删除
const handleDelete = (id: number | string) => {
	console.log('delete', id);
};

// 新增编辑弹窗
const modalVisible = ref<boolean>(false);
const modalType = ref<string>('add');
const currentId = ref<number | string>(0);
const openModal = (type: string, editId: number | string) => {
	modalType.value = type;
	currentId.value = editId || 0;
	modalVisible.value = true;
};
</script>

<style scoped lang="scss">
@use '@/assets/style/mixin' as mixin;
@include mixin.reset-el-collapse;
@include mixin.reset-el-card;
</style>
